<template>
  <!-- <uni-list>
    <uni-list-item
      :title="item.content"
      :note="item.createTime"
      v-for="item in noticeList"
      :key="item.id"
      ellipsis="3"
    >
      <template v-slot:header>
        <view class="slot-box">
          <image :src="`../../static/images/book-icon.png`" class="home_icon" />
        </view>
      </template>
    </uni-list-item>
  </uni-list> -->

  <view class="container">
    <uni-card v-for="item in noticeList" :key="item.id" class="card-box">
      <template v-slot:title>
        <view class="header-box">
          <view class="title">
            <image :src="`../../static/images/book-icon.png`" class="home_icon" />
            <view class="content">{{ item.title }}</view>
          </view>
          <view class="desc">{{ item.createTime }}</view>
        </view>
      </template>
      <text>{{ item.content }}</text>
    </uni-card>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { findKnowledgeList } from '@/api/system'
import { onShow, onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

let noticeList = reactive([])
const total = ref(0)
const params = reactive({
  pageSize: 20,
  pageNum: 1
})

onLoad(() => getNoticeList())
const getNoticeList = () => {
  uni.showLoading({ title: '加载中', mask: true })
  findKnowledgeList(params)
    .then((resp) => {
      const { code, data } = resp
      if (code === 200 && data) {
        total.value = Number(data.total)
        const resultData = data.records || []
        noticeList.push(...resultData)
      }
    })
    .finally(() => {
      uni.hideLoading()
    })
}

onReachBottom(() => {
  if (noticeList.length >= total.value) {
    return
  }
  params.pageNum = params.pageNum + 1
  getNoticeList()
})

onPullDownRefresh(() => {
  params.pageSize = 15
  params.pageNum = 1
  noticeList = []
})
</script>

<style lang="scss" scoped>
.container {
  margin-bottom: 80upx;
}
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14upx 0 18upx 0;
  border-bottom: 1upx solid #dddddd63;
  .title {
    display: flex;
    flex: 1;
    align-items: center;
    word-wrap: break-word;
    .home_icon {
      width: 22upx;
      height: 22upx;
    }
    .content {
      font-size: 14px;
      padding-left: 8upx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .desc {
    width: 280upx;
    text-align: right;
    font-size: 13px;
    color: #8c8989;
  }
}
</style>
